<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="父部门id" prop="parentId">
              <el-input
                      v-model="queryParams.parentId"
                      placeholder="请输入父部门id"
                      clearable
                      @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="部门名称" prop="deptName">
              <el-input
                      v-model="queryParams.deptName"
                      placeholder="请输入部门名称"
                      clearable
                      @keyup.enter.native="handleQuery"
              />
            </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['demo:dept:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
                type="info"
                plain
                icon="el-icon-sort"
                size="mini"
                @click="toggleExpandAll"
        >展开/折叠</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
            v-if="refreshTable"
            v-loading="loading"
            :data="tableData"
            row-key="id"
            :default-expand-all="isExpandAll"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
            <el-table-column label="父部门id" prop="parentId" />
            <el-table-column label="部门名称" align="center" prop="deptName" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['demo:dept:edit']"
          >修改</el-button>
          <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-plus"
                  @click="handleAdd(scope.row)"
                  v-hasPermi="['demo:dept:add']"
          >新增</el-button>
          <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['demo:dept:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import ListMixin from "@/minixs/tree/list"
import { listDept  } from "@/api/demo/dept";
export default {
  name: "DeptList",
  mixins:[ListMixin],
  data(){
    return {
      // 查询参数
      queryParams: {
              parentId: null,
              deptName: null,
      },
    }
  },
  methods:{
    getList(){
      this.loading = true;
      listDept(this.queryParams).then(response => {
        this.tableData = this.handleTree(response.data, "id", "parentId");
        this.loading = false;
      });
    }
  }
};
</script>
